<!--
 * @Descripttion: 订单分页列表
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-27 09:27:01
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-07-08 09:57:49
-->
<template>
  <div class="app-container">
    <el-form ref="filterForm" :model="list.filter" inline>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>

      <el-form-item prop="hotelName">
        <el-input
          v-model.trim="list.filter.hotelName"
          placeholder="酒店名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="orderId">
        <el-input
          v-model.trim="list.filter.orderId"
          placeholder="订单ID"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="orderStatus">
        <KiSelect
          v-model="list.filter.orderStatus"
          :options="orderStatusList"
          placeholder="订单状态"
        />
      </el-form-item>

      <el-form-item prop="contactName">
        <el-input
          v-model.trim="list.filter.contactName"
          placeholder="预订人"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="personName">
        <el-input
          v-model.trim="list.filter.personName"
          placeholder="入住人"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="contactPhone">
        <el-input
          v-model.trim="list.filter.contactPhone"
          placeholder="联系电话"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <!-- <el-form-item prop="channelId">
        <el-select
          v-model="list.filter.channelId"
          placeholder="渠道名称"
          clearable
          filterable
        >
          <el-option
            v-for="item in options.channelsList"
            :key="item.channelId"
            :label="item.channelName"
            :value="item.channelId"
          >
          </el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item prop="checkInTime">
        <div class="flex-wrap">
          <div class="flex">预订时间段</div>
          <div class="flex">
            <time-range-picker
              :start.sync="list.filter.checkInTime"
              :end.sync="list.filter.checkOutTime"
              placeholder="开始日期/结束日期"
            />
          </div>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button
          @click="
            () => {
              $refs.filterForm.resetFields();
            }
          "
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <!-- <auth-button
          @click="exportExcel()"
          :loading="exportListLoading"
          :disabled="!(list.data && list.data.length > 0)"
          name="导出"
        /> -->
        <ExportExcel
          url="/sot-admin-api/hotel/self-order/downLoadOrderList"
          :param="list.filter"
          :disabled="!(list.data && list.data.length > 0)"
        />
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index" />
      <el-table-column label="订单ID" prop="orderId" />
      <el-table-column label="酒店名称" prop="hotelName" />
      <el-table-column label="预订人" prop="contactName" />
      <el-table-column label="联系电话" prop="contactPhone" />
      <el-table-column label="入住人" prop="persons">
        <template slot-scope="{ row }">
          {{ formatPersons(row.persons) }}
        </template>
      </el-table-column>
      <el-table-column label="入住日期" prop="useStartTime" />
      <el-table-column label="离店日期" prop="useEndTime" />
      <el-table-column label="订单金额" prop="totalAmount">
        <template slot-scope="{ row }">
          ¥ {{ row.totalAmount | $cent2yuan }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="订单状态" prop="orderStatus">
        <template slot-scope="{ row }">
          {{ filterDict(orderStatusList, String(row.orderStatus)) }}
        </template>
      </el-table-column> -->
      <el-table-column label="订单状态" prop="orderStatusName" />
      <!-- <el-table-column label="渠道" prop="channelName" /> -->
      <el-table-column label="订单创建时间" prop="createTime" />
      <el-table-column label="最后修改时间" prop="updateTime" />
      <el-table-column
        label="操作"
        class-name="small-padding"
        align="center"
        width="240"
      >
        <template slot-scope="{ row }">
          <auth-button @click=" r({ id: row.orderId })" name="查看" />

          <!-- orderStatus===20 待确认 -->
          <auth-button
            type="primary"
            name="确认订单"
            circle
            @click="onOrderConfirm(row, 'order')"
            v-if="row.orderStatus === 20"
          >
            <i class="el-icon-folder-checked"></i>
          </auth-button>

          <!-- orderStatus===21 待入住 -->
          <auth-button
            type="primary"
            name="确认入住"
            circle
            @click="onOrderConfirm(row, 'live')"
            v-if="row.orderStatus === 21"
          >
            <i class="el-icon-school"></i>
          </auth-button>

          <!-- orderStatus===23 已入住 -->
          <auth-button
            type="danger"
            name="退款"
            circle
            @click="onOrderRefund(row)"
            v-if="
              (row.orderStatus === 21 || row.orderStatus === 23) &&
              row.canRefundForPc
            "
          >
            <i class="el-icon-message-solid"></i>
          </auth-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情弹框 -->
    <detailDialog
      :form="form"
      v-if="form.status === 'r'"
    >
    </detailDialog>

    <!-- 订单确认弹框 -->
    <confirmDialog :form="confirmTarget" @change="delayRefresh"></confirmDialog>

    <!-- 订单退款弹框 -->
    <refundDialog :form="refundTarget" @change="delayRefresh"></refundDialog>

    <!-- 操作提醒 -->
    <remindDialog :form="remindTarget" @ok="onRemindOk"></remindDialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import detailDialog from "./components/detail";
import confirmDialog from "./components/confirm";
import refundDialog from "./components/refund";
import remindDialog from "./components/remind";

export default {
  mixins: [pageMixin],
  setup: (v) => {
    return useAdmateAdapter({
      urlPrefix: 'sot-admin-api/hotel/self-order',
    })
  },
  components: {
    detailDialog,
    confirmDialog,
    refundDialog,
    remindDialog,
  },
  computed: {
    ...mapGetters(["areaTree", "dict", "userInfo"]),
  },
  data() {
    return {
      // 字典---订单状态(分页结果)
      orderStatusList: [
        {
          dataName: "待支付",
          dataValue: "10",
        },
        {
          dataName: "支付中",
          dataValue: "11",
        },
        {
          dataName: "已关闭",
          dataValue: "12",
        },
        {
          dataName: "支付失败",
          dataValue: "13",
        },
        {
          dataName: "待确认",
          dataValue: "20",
        },
        {
          dataName: "待入住",
          dataValue: "21",
        },
        {
          dataName: "已入住",
          dataValue: "23",
        },
        {
          dataName: "取消中",
          dataValue: "30",
        },
        {
          dataName: "已取消",
          dataValue: "31",
        },
      ],
      // list: {
      //   filter: {
      //     checkInTime: this.$dayjs(
      //       new Date(this.getNativeTime(0)).getTime() -
      //         (30 - 1) * 24 * 60 * 60 * 1000
      //     ).format("YYYY-MM-DD"),
      //     checkOutTime: this.$dayjs(
      //       new Date(this.getNativeTime(1)).getTime()
      //     ).format("YYYY-MM-DD"),
      //   },
      // },
      // options: {
      //   // 渠道列表
      //   channelsList: [],
      // },
      // 导出中
      exportListLoading: false,
      // 订单确认弹框对象
      confirmTarget: {
        type: null,
        show: false,
        data: null,
        loading: false,
      },
      // 订单退款弹框对象
      refundTarget: {
        show: false,
        data: null,
        loading: false,
      },
      // 操作提醒弹框
      remindTarget: {
        show: false,
        data: null,
        loading: false,
      },
    };
  },
  // created() {
  //   this.queryChannelList();
  // },
  methods: {
    // // 过滤字段表状态
    // filterDict(source, value) {
    //   if (source) {
    //     let item = source.filter((d) => d.dataValue == value)[0];
    //     return item ? item.dataName : "";
    //   }
    //   return "";
    // },
    /**
     * 根据条件获取当前日期的00:00:00和23:59:59时刻的时间
     * @param {number} tag 0代表取00:00:00,1代表取23:59:59
     * @return {Date}
     */
    getNativeTime(tag) {
      let tt = new Date();
      tt.setHours(tag ? 23 : 0);
      tt.setMinutes(tag ? 59 : 0);
      tt.setSeconds(tag ? 59 : 0);
      return tt;
    },
    /**
     * 格式化入住人姓名
     * @param {Array} list
     * @return {String}
     */
    formatPersons(list) {
      let arr = [];
      if (list && list instanceof Array && list.length > 0) {
        list.forEach((item) => {
          arr.push(item.name);
        });
        return arr.join("、");
      } else {
        return "";
      }
    },
    // /**
    //  * 平台用户支持选择所有渠道，商户只能选择自身已授权渠道(可以包含平台的)
    //  * @return Void
    //  */
    // queryChannelList() {
    //   let params = null;
    //   // 平台用户
    //   if (this.userInfo.userType === 0) {
    //     params = {};
    //   } else {
    //     params = {
    //       authHotel: 1,
    //     };
    //   }
    //   this.$POST("sot-admin-api/sys/company-channel/queryForList", params)
    //     .then(({ data }) => {
    //       this.options.channelsList = data;
    //     })
    //     .finally((e) => {});
    // },
    // /**
    //  * 导出
    //  */
    // exportExcel() {
    //   if (this.exportListLoading) {
    //     return false;
    //   }
    //   this.exportListLoading = true;
    //   this.$POST.download("sot-admin-api/hotel/self-order/downLoadOrderList", this.list.filter, {
    //     method: "POST",
    //   }).finally((e) => {
    //     this.exportListLoading = false;
    //   });
    // },
    /**
     * 格式化入住人姓名
     * @param {Array} list
     * @return {String}
     */
    formatPersons(list) {
      let arr = [];
      if (list && list instanceof Array && list.length > 0) {
        list.forEach((item) => {
          arr.push(item.name);
        });
        return arr.join("、");
      } else {
        return "";
      }
    },
    onOrderConfirm(row, type) {
      this.confirmTarget.show = true;
      this.confirmTarget.type = type;
      this.confirmTarget.data = row;
    },
    /**
     * 点击退款,已入住状态下点击后展示提醒弹窗，待入住状态下点击后无提醒弹窗，直接展示订单退款弹窗
     * @param {Object} row
     * @return Void
     */
    onOrderRefund(row) {
      // orderStatus 21:待入住, 23:已入住
      if (row.orderStatus == 23) {
        this.remindTarget.show = true;
        this.remindTarget.data = row;
      } else {
        this.onRemindOk(row);
      }
    },
    onRemindOk(row) {
      this.refundTarget.show = true;
      this.refundTarget.data = row;
    },
    /**
     * 延迟触发页面刷新
     * 处理退款成功立即刷新页面引起的数据未同步的问题
     * @return Void
     */
    delayRefresh() {
      let timer = setTimeout(() => {
        clearTimeout(timer);
        this.getList();
      }, 680);
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-wrap {
  // min-width: 300px;
  display: flex;
  flex-direction: row;
  .flex {
    &:first-child {
      padding-right: 12px;
    }
    &:last-child {
      flex: 1;
    }
  }
}
</style>